<template>
    <div class="movie-detal-wrap">
            <div class="wrap-heard">
                <div class="heard-avatar">
                    <div><img :src="MhotDatas.image" alt=""></div>
                    <div class="heard-details">
                        <span>{{MhotDatas.title1}}</span>
                        <span>{{MhotDatas.title2}}</span>
                        <span>{{MhotDatas.leixing}}</span>
                        <span>{{MhotDatas.diqu}}</span>
                        <span>{{MhotDatas.timer}}</span>
                        <div class="buy-th">
                            <div>
                                <span class="el-icon-star-on">想看</span>
                                <span class="el-icon-s-opportunity">评分</span>
                            </div>
                            <p>特惠购票</p>
                        </div>
                    </div>
                    <div class="saoma-buy">
                        <img src="../../assets/qr.png" alt="">
                        <span>微信扫码购票</span>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    props:['MhotDatas'],

    name: 'Moviemain',
    data() {
        return {
           
        };
    },
    mounted() {
        
    },
    // methods: {
    //     // 路由跳转过来后的id去数据库查询到的当前id数据
    //     async getHotDetail(id){
    //         let hotData = await this.$http.get('/NowcnimenHotDetail',{
    //             params:{id:id}
    //         })
    //         this.MhotDatas = hotData.data.data[0]
    //         console.log(this.MhotDatas);
    //     }
    // },
    // mounted(){
    //     // 跳转过来刷新页面
    //     // location.reload()
    // },
    // created(){
    //     let id = this.$route.query.id;
    //     this.getHotDetail(id)
    // }
};
</script>

<style lang="scss" scoped>
.movie-detal-wrap{
        margin: 80px 0;
        width: 100%;
        min-height: 300px;
        .wrap-heard{
            width: 100%;
            height: 376px;
            background: linear-gradient(to left top , #5f47af 10% ,#8f5465 100%);
            padding-top:80px ;
            box-sizing: border-box;
            .heard-avatar{
                width: 1100px;
                height: 100%;
                /* background: #30582e; */
                margin: 0 auto;
                display: flex;
                .heard-details{
                    margin: 0 0 20px 30px;
                    display: flex;
                    flex-direction: column;
                    >:nth-child(1){
                        font-size: 26px;
                        font-weight: bold;
                        color: #fff;
                    }
                    >:nth-child(2){
                        font-size: 18px;
                        color: #fff;
                        margin-bottom: 13px;
                    }
                    >:nth-child(3){
                        font-size: 14px;
                        color: rgb(233, 229, 229);
                        margin-bottom: 10px;
                    }
                    >:nth-child(4){
                       @extend :nth-child(3)
                    }
                     >:nth-child(5){
                       @extend :nth-child(3)
                    }
                    .buy-th{
                        width: 260px;
                        height: 86px;
                        /* background: #fff; */
                        margin-top: 30px;
                        >div span{
                            padding: 10px 30px;
                            background: rgba(136, 102, 170, 1);
                            color: #fff;
                            border-radius:2px;
                            margin-right: 5px;
                        }
                        >p{
                            width: 225px;
                            height: 40px;
                            background: #de2d2c;
                            border-radius:2px ;
                            margin-top: 10px;
                            line-height: 40px;
                            text-align: center;
                            color: #fff;
                        }
                    }
                }
                img{
                    width: 240px;
                    height: 330px;
                    border: 3px solid rgb(255, 255, 255);
                    box-sizing: border-box;
                    box-shadow: 0 5px 15px rgb(223, 218, 218);
                }
                .saoma-buy{
                    width: 130px;
                    height: 200px;
                    margin-left:350px;
                    >img{
                        width: 130px;
                        height: 130px;
                        margin-bottom: 10px;
                    }
                    >span{
                        display: block;
                        font-weight: bold;
                        width: 130px;
                        text-align: center;
                        color: #dd2d2b;
                    }
                }
            }
        }
    }
</style>